<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<style>
    a[href] {

        color: black;

    }

    .qwe {
        color: red;


    }

    .aqua {

        font-size: 25px;
        color: aqua;

    }

    #stock {
        font-size: 30px;
        color: brown;
    }

</style>
<body>
<!-- <link rel="stylesheet" href="example.css"> -->

<!-- <script src="example.js" type="text/javascript" charset="utf-8"></script> -->


<a href="http://baidu.com" target="_blank">百度</a><!-- #~id .~class -->
<br>
<form action="#" method="#" id="infoForm" onsubmit="GetInfomation()">
    用户名：<input type="text" id="username" name="username" value="" required/>
    <br>
    密 &nbsp 码：<input type="password" id="password" name="password" required/>
    <br>
    <input type="radio" name="" id="sex" value="F" checked/>男
    <input type="radio" name="" id="sex" value="M"/>女
    <br>
    <button type="submit" id="submitbtn">提交</button>
    <button type="reset" id="resetbtn">重置</button>
    <br>
    onclick="GetInfomation()"
</form>
<div>
    <p class="aqua"> 常见的块级元素：div,form,h1~h6,p,table,ul</p>
    <p id="stock">1.块元素在页面独占一行</p>
    <p id="stock">2.可以设置weight，height</p>
    <p id="stock">3.一般的块级元素包括行内元素和其他的块级元素 </p>
</div>


<div>
    <p class="aqua">常见的内联元素(行内元素)：a,b,em,i,span,strong</p>
    <p class="qwe">1.页面元素不会独占一行，只占自身大小</p>
    <p class="qwe"> 2.行内属性weight，height无效</p>
    <p class="qwe">3.一般的内联元素包含内联元素不包含块级元素</p>

</div>
<span id="">
	#~id  id选择器
	<br>
	.~class 类选择器

	</span>

<br>
<strong>安徽科技学院 </strong>


<script type="text/javascript">

    // var index="Hellow My Assignment";
    // 	alert(index);
    // function GetInfomation(){
    // var username = document.getElementById("username").value;

    // var password = document.getElementById("password").value;

    // var sex = document.getElementById("sex");
    // switch(sex){
    // 	case(F):sex.innerHTML = "男";
    // 	broke;
    // 	case(M):sex.innerHTML = "女";
    //


    // alert("username:"+username.value+"password:"+password.value);
    // console.log("用户名："+username);
    // console.log("密码："+password);
    // 添加计数器
    window.onload = function () {
        //dom2
        document.getElementById("infoForm").addEventListener("submit",
            function (event) {

                event.preventDefault();

                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;

                var submit = document.getElementById("submitbtn");
                var reset = document.getElementById("resetbtn");
                submit.onmousedown() = function () {
                    infoForm.submit();
                }
                reset.onmousedown() = function () {
                    infoForm.reset();
                }


                console.log(" 用户名 :", username);
                console.log(" 密码 :", password);


            });

    }

</script>


</body>
</html>